body {
background: rgb(246, 246, 246);
margin: 0px;
padding: 0px;
}

#main {
width: 100vw;
height: 800px;
overflow: hidden;
display: flex;
justify-content: center;
position: relative;
}

#banner {
width: 150vw;
height: 800px;
overflow: hidden;
position: absolute;
min-width: 1000px;
background-color: #6d50f0;
background: radial-gradient(rgba(109, 80, 240, 0.95), rgba(245, 248, 250, 0.15)), url('./blockly/ini/site/web-ui.svg') no-repeat 0% 20%/ cover;
background-position: center 0;
border-radius: 0 0 50% 50%;
}

#content {
display: flex;
align-items: center;
height: 100%;
width: 100vw;
justify-content: center;
position: absolute;
flex-direction: column;
color: #fff;
filter: drop-shadow(0 0 30px #9C89FF);
animation: a 1.3s both;
-webkit-animation: a 1.3s both;
}

@keyframes a {
0% {
opacity: 0;
transform: translateY(50px);
}

100% {
opacity: 1;
transform: translateY(0px);
}
}

@-webkit-keyframes a {
0% {
opacity: 0;
transform: translateY(50px);
}

100% {
opacity: 1;
transform: translateY(0px);
}
}

.ver {
border-width: 0;
background: #9C89FFaa;
color: white;
width: 150px;
font-size: 22px;
height: 70px;
border-radius: 10px;
margin: 0 20px;
display: flex;
align-items: center;
justify-content: space-evenly;
align-content: center;
transition: transform 0.3s, background-color 0.3s;
}

.ver:hover {
transform: scale(1.1);
background: #9C89FF11;
cursor: pointer;
}

#thank,
#form {
width: 100vw;
margin: 100px 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
align-content: center;
color: #000;
font-size: 25px;
flex-wrap: wrap;
animation: a 1.3s both;
-webkit-animation: a 1.3s both;
}

*::-webkit-scrollbar {
display: none;
}

* {
scrollbar-width: none;
-ms-overflow-style: none;
}

.card,
.thankyou {
margin: 10px;
width: 250px;
height: 200px;
background: white;
border-radius: 0.4em;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: transform 0.3s;
}

.thankyou {
width: 250px;
height: 250px;
justify-content: space-evenly;
}

.card:hover,
.thankyou:hover {
transform: scale(1.1);
cursor: pointer;
}

#footer {
width: calc(100vw - 40px);
height: max-content;
border: #fff solid 20px;
background: white;
display: flex;
align-items: center;
justify-content: center;
align-content: center;
flex-wrap: wrap;
text-decoration: auto;
color: currentColor;
}

.rouqi,
.rongqi {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
align-content: center;
}

.thank_pic {
width: 100px;
height: 100px;
}

@media only screen and (max-width: 1350px) {
.rouqi {
width: 810px;
}

.rongqi {
width: 540px;
}
}

@media only screen and (max-width: 810px) {

.rouqi,
.rongqi {
width: 540px;
}
}

@media only screen and (max-width: 540px) {

.card,
.thankyou {
width: 200px;
height: 200px;
}

.rouqi,
.rongqi {
width: calc(540px * 0.815);
}
}

@media only screen and (max-width: 430px) {

.card,
.thankyou {
width: 150px;
height: 150px;
font-size: 20px;
}

.rouqi,
.rongqi {
width: calc(540px * 0.63);
}

.thank_pic {
width: 50px;
height: 50px;
}
}